<template>
  <div class="menu-manager">
    <el-table
      :data="tableData"
      row-key="id"
      style="width: 50%; min-width: 800px; margin: 0 auto"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column align="center" label="日期" prop="date" />
      <el-table-column align="center" label="类型" prop="name" />
      <el-table-column align="center" label="操作" prop="address" width="150px">
        <template slot="header">
          <el-button icon="el-icon-plus" round type="text" @click="onPlusType1">添加大类</el-button>
        </template>
        <template slot-scope="{ row }">
          <el-button v-if="row.children" icon="el-icon-plus" type="text" @click="onPlusType2(row)">添加小类</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'MenuManager',
    data() {
      return {
        tableData: [
          {
            id: 3,
            date: '2016-05-01',
            name: '可研报告',
            address: '上海市普陀区金沙江路 1519 弄',
            children: [
              {
                id: 31,
                date: '2016-05-01',
                name: '产业园区',
                address: '上海市普陀区金沙江路 1519 弄',
              },
              {
                id: 32,
                date: '2016-05-01',
                name: '社会事业',
                address: '上海市普陀区金沙江路 1519 弄',
              },
            ],
          },
          {
            id: 4,
            date: '2016-05-01',
            name: '公盟报告',
            address: '上海市普陀区金沙江路 1519 弄',
            children: [
              {
                id: 41,
                date: '2016-05-01',
                name: '产业园区',
                address: '上海市普陀区金沙江路 1519 弄',
              },
            ],
          },
        ],
      }
    },
    methods: {
      onPlusType1() {
        console.log('添加大类')
      },
      onPlusType2(data) {
        console.log(data)
      },
    },
  }
</script>

<style scoped lang="scss"></style>
